<!--
 * @Description:多物体变宽变高
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-07 12:55:25
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>多物体变宽变高</title>
		<script src="./move3.js"></script>
	<style>
		div {
			width: 100px;
			height: 100px;
			flex: left;
			background: yellow;
			margin: 20px;
			border: 1px solid slateblue;
		}
	</style>
	<script>
		window.onload = function () {
			var odiv = document.getElementById("div1")
			var odiv1 = document.getElementById("div2")
			var odiv2 = document.getElementById("div3")
			var odiv3 = document.getElementById("div4")

			function getStyle(obj, name) {
				if (obj.currentStyle) {
					return obj.currentStyle
				} else {
					return getComputedStyle(obj, false)[name]
				}
			}

			function startmove(obj,attr,itarget) {
				clearInterval(obj.timer)
				obj.timer = setInterval(() => {
					var cur=0;
					if(attr=='opacity'){
						cur=Math.round(parseFloat(getStyle(obj, attr))*100)
					}else{
						cur=parseInt(getStyle(obj, attr))
					}
					var speed = (itarget - cur) / 6
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
					if (cur== itarget) {
						clearInterval(obj.timer)
					} else {
						if(attr=='opacity'){
							obj.style.opacity=(cur + speed)/100;
						}else{
							obj.style[attr] = cur + speed + 'px'
						}
					}
				}, 30)
			}

			odiv.onmouseover = function () {
				console.log("ppp")
				startmove(this,'height',400)
			}
			odiv.onmouseout = function () {
				startmove(this,'height', 100)
			}
			odiv1.onmouseover = function () {
			console.log("ppp")
			startmove(this,'width',400)
			}
			odiv1.onmouseout = function () {
			startmove(this,'width', 100)
			}
			odiv2.onmouseover = function () {
			console.log("ppp")
			startmove(this,'fontSize',24)
			}
			odiv2.onmouseout = function () {
			startmove(this,'fontSize', 14)
			}
			odiv3.onmouseover = function () {
			console.log("ppp")
			startmove(this,'opacity',100)
			}
			odiv3.onmouseout = function () {
			startmove(this,'opacity',30)
			}

		}
	</script>
</head>

<body>
	<p>
		1 在多物体运动框架里面<br>
		所以的运动属性都不能公用<br>
		Math.round 四舍五入
	</p>
	<div id="div1">变宽</div>
	<div id="div2">变高</div>
	<div id="div3">字体变大</div>
	<div id="div4">变透明</div>
</body>

</html>